<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery-1.11.0.js"></script>
</head>
<body>
    <table border="1" align="center" width="60%" id="stus_table">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>insert_time</th>
        </tr>

        <tr>
            <td>1</td>
            <td>zs</td>
            <td>18</td>
            <td>1111111</td>
        </tr>
    </table>

    <br>
    <br>
    <div id="pages" style="text-align: center">

    </div>


    <script>

        function page(pageNum){
            <!--        分页加载-->
            $.ajax({
                url:"stu?action=findPage&pageNum="+pageNum+"&pageSize=5",
                type:"get",
                success:function (data){
                    let stus = data.list;

                    $("#stus_table").html("<tr>\n" +
                        "            <th>id</th>\n" +
                        "            <th>name</th>\n" +
                        "            <th>age</th>\n" +
                        "            <th>insert_time</th>\n" +
                        "        </tr>")

                    $.each(stus,function (idx,stu){
                        //将学生信息展示到表格中
                        $("#stus_table").append("<tr>\n" +
                            "            <td>"+stu.id+"</td>\n" +
                            "            <td>"+stu.name+"</td>\n" +
                            "            <td>"+stu.age+"</td>\n" +
                            "            <td>"+stu.insertTime+"</td>\n" +
                            "        </tr>");
                    });

                    //生成页码
                    $("#pages").html("");
                    let pages = data.pages;
                    for (let i = 1; i <= pages ; i++) {
                        $("#pages").append("<a href='javascript:page("+i+");'>"+i+"</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp")
                    }
                },
                dataType:"json"
            })
        }

        //进入页面执行分页查询
        page(1);

    </script>
</body>
</html>